<template>
	<u-popup
		v-model="propShow"
		mode="bottom"
		:mask-close-able="false"
		class="chicken-edit">
		<view class="box">
			<view class="prop-title">我的道具</view>
			<scroll-view
				scroll-y
				@scrolltolower="scrolltolower"
				class="center">
				<view class="prop-box">
					<view
						v-for="(val, index) in propsList"
						:key="index"
						class="item">
						<view class="item-top">
							<view>{{ val.name }}</view>
							<view>{{ val.have }}/{{ val.fill }}</view>
						</view>
						<view class="item-bottom" @click="useProp(val)">
							使用道具
						</view>
						<img
							:src="val.img"
							class="img"
							alt="" />
					</view>
				</view>
				<view class="btn" @click="jump">
					做任务得道具 &gt;
				</view>
			</scroll-view>
			
			<image
				class="bg"
				src="/static/images/chicken/bg_props.png"
				mode="widthFix"></image>
			<image
				class="close"
				@click="changeShow"
				src="/static/images/chicken/close.png"
				mode="widthFix"></image>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'myMessage',
		props: {
			propShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				propsList: [
					{
						name: '新蛋卡',
						img: '/static/images/chicken/props_1.png',
						fill: 10,
						have: 2,
						color: '#F44B56',
					},
					{
						name: '折扣卡',
						img: '/static/images/chicken/props_2.png',
						fill: 10,
						have: 2,
						color: '#9279F7',
					},
				]
			}
		},
		mounted() {
			
		},
		methods: {
			changeShow() {
				this.$emit('changeShow', 'propShow');
			},
			scrolltolower() {
				console.log(1111111111);
			},
			useProp(val) {
				uni.showToast({
					title: '使用道具成功',
					icon: 'none',
				});
				this.changeShow();
				this.$emit('useSuccess', val);
			},
			jump() {
				this.changeShow();
				this.$emit('jump', 'prop');
			},
		}
	}
</script>

<style lang="scss" scoped>
.chicken-edit {
	.box {
		position: relative;
		width: 100%;
		min-height: 998rpx;
		background-color: transparent;
		.prop-title {
			position: absolute;
			left: 0;
			top: 196rpx;
			z-index: 1;
			width: 100%;
			font-size: 36rpx;
			font-weight: bold;
			color: #732011;
			text-align: center;
			letter-spacing: 2rpx;
		}
		.center {
			position: absolute;
			left: 0;
			top: 332rpx;
			z-index: 1;
			width: 100%;
			height: calc(100% - 332rpx);
			text-align: center;
			.prop-box {
				display: flex;
				justify-content: space-between;
				padding: 0 44rpx;
			}
			.btn {
				margin-top: 66rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #732011;
			}
			.item {
				position: relative;
				display: flex;
				width: 320rpx;
				height: 420rpx;
				.item-top {
					position: relative;
					z-index: 1;
					width: 100%;
					padding-top: 52rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					view:first-of-type {
						margin-bottom: 20rpx;
						font-size: 32rpx;
						font-weight: bold;
					}
				}
				.item-bottom {
					position: absolute;
					left: 50%;
					bottom: 33rpx;
					z-index: 1;
					transform: translateX(-50%);
					width: 200rpx;
					height: 66rpx;
					line-height: 66rpx;
					background: #ffffff;
					border-radius: 33rpx;
					font-size: 28rpx;
					color: #F44B56;
				}
				&:last-of-type .item-bottom {
					color: #9279F7;
				}
				.img {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
			}
		}
		.bg {
			width: 100%;
			margin-bottom: -10rpx;
		}
		.close {
			position: absolute;
			right: 30rpx;
			top: 220rpx;
			width: 46rpx;
		}
	}
}
</style>